<template>
<div>
<el-form ref="bussiness" :rules="rules" 
	:model="bussiness" 
	label-width="180px">

	<el-form-item label="商家名称：" prop="name" >
		<el-input v-model="bussiness.name" placeholder="请输入商家名称" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="商家电话：" >
		<el-input v-model="bussiness.mobile" placeholder="请输入商家电话" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="营业时间：" >
		<el-input v-model="bussiness.open_time" placeholder="请输入营业时间" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="商家地址：" >
		<el-input v-model="bussiness.address" placeholder="请输入商家地址" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="商家简介：" >
		<el-input type="textarea" v-model="bussiness.content" placeholder="请输入商家简介" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="商家图片：" >
		<el-upload
		  class="avatar-uploader"
		  :action="URL.upload"
		  :data="para"
		  :show-file-list="false"
		  :before-upload="beforeAvatarUpload"
		  :on-success="handleAvatarSuccess">
		  <img v-if="bussiness.img != undefined && bussiness.img != ''" 
		  :src="bussiness.img" class="avatar">
		  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
	</el-form-item>

	<el-form-item class="mt10">
	     <el-button type="primary" 
	     @click="saveBussiness(bussiness)">
	     确认商家修改</el-button>
	</el-form-item>

</el-form>

</div>		
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	name: 'bussinessdetail',
	data () {
		return {
		  	rules: {
	          name: [
	            { required: true, message: '请输入票种名称', trigger: 'blur' },
	            { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
	          ],
	        },

			bussiness : this.bussinessDetail,
		}
	},

	props: {
		bussinessDetail : {
			type : Object,
			default : () => {
				return {
					name : '123',
		        	mobile : '',
		        	open_time : '',
		        	address : '',
		        	content : '',
		        	img : '',
		       	}
			},
		}
	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'userInfo',
			'URL',
			'common',
		]),

		para () {
			return {
				dir : this.userInfo.company_code + '/bussiness/',
			}
		}
	},

	methods : {
		beforeAvatarUpload (file) {
	        const isLtM = file.size / 1024 / 1024 < this.common.imgMaxSize;

	        if (!isLtM) {
	          this.$message.error('上传图片大小不能超过 ' + this.common.imgMaxSize + 'MB!');
	        }
	        return isLtM;
		},

		saveBussiness (item) {
			this.$store.dispatch('updateBussiness', {...item, cb : (res) => {
				this.$emit('save-success');
			}})
		},

		handleAvatarSuccess(res, file) {
			console.log('res.url');
			console.log(res.url);
	        this.bussiness.img = res.url;
	        console.log(this.bussiness);
	    },

	},

	watch : {
	    
	},

	mounted () {
		console.log(this.bussiness);
		
	},

}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
